<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="orderSearch">
      <el-form ref="form" :model="getTuifeiQueryInfo" label-width="80px" inline>
        <el-form-item>
          <el-input
            v-model="getTuifeiQueryInfo.order_id"
            placeholder="请输入订单号"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTuifei()">查询</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 金额显示区域 -->
    <div class="moneyShow">
      <div class="moneyShowDIa">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingzhuanggongnengtubiao-1" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>退费订单总量:</div>
            <div class="dingdanzongeasdaa">139</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIb">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiaozhizuomoban" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>退费受理中</div>
            <div class="dingdanzongeasdaa">60</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdanxiangqing-dingdanzhuangtai" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>已处理</div>
            <div class="dingdanzongeasdaa">80</div>
          </div>
        </div>
      </div>
    </div>
    <div class="xuanzexianshi" style="margin: 25px 0 0 20px">
      <el-link
        :type="showPage === 1 ? 'primary' : ''"
        @click="showPage = 1"
      >全部列表</el-link>
      <div>
        <el-link
          :type="showPage === 2 ? 'primary' : ''"
          @click="showPage = 2"
        >受理中</el-link>
      </div>
      <div>
        <el-link
          :type="showPage === 3 ? 'primary' : ''"
          @click="showPage = 3"
        >已作废</el-link>
      </div>
    </div>
    <!-- 全部列表 -->
    <div v-if="showPage === 1">
      <div class="tuifeibiaoqianBtn">
        <el-button
          type="success"
          size="medium"
          @click="addOrderDIALOG = true"
        >新建退费</el-button>
        <el-button size="medium">导出</el-button>
      </div>
      <!-- 退费表格区域 -->
      <el-table
        border
        size="mini"
        fit
        highlight-current-row
        :data="tuifeiShuzu"
      >
        <el-table-column align="center" label="序号" type="index" width="100" />

        <el-table-column align="center" label="退费状态">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_status === 0)" type="info" effect="dark"> 受理中 </el-tag>
            <el-tag v-if="(scope.row.return_status === 1)" type="primary" effect="dark"> 已完成 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退费方式">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_type === 1)"> 现金 </el-tag>
            <el-tag v-if="(scope.row.return_type === 2)" type="primary"> 刷卡 </el-tag>
            <el-tag v-if="(scope.row.return_type === 3)" type="info"> 支付宝 </el-tag>
            <el-tag v-if="(scope.row.return_type === 4)" type="warning"> 微信 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单ID" prop="order_id" />
        <el-table-column
          align="center"
          label="录入信息"
          width="120"
          prop="information"
        />
        <el-table-column align="center" label="备注" width="120" prop="desc" />
        <el-table-column align="center" label="学生id" prop="student_id" />
        <el-table-column
          align="center"
          label="审批人名字"
          width="160"
          prop="teacher_name"
        />
        <el-table-column align="center" label="主根进人id" prop="teacher_id" />
        <el-table-column
          align="center"
          label="机构id"
          width="100"
          prop="institution_id"
        />
        <el-table-column
          align="center"
          label="退费金额"
          width="100"
          prop="back_fees"
        />
        <el-table-column align="center" label="查看" width="300">
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              @click="lookTuiFeiDialogVisible = true;getTuifeiRow(scope.row.unid)"
            >查看</el-button>
            <el-button
              size="medium"
              type="danger"
              icon="el-icon-delete"
              @click="deleteTuifei(scope.row.unid)"
            >作废</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[6, 15, 30]"
          :page-size="getTuifeiQueryInfo.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 受理中  未作废列表-->
    <div v-if="showPage === 2">
      <div class="tuifeibiaoqianBtn">
        <el-button
          type="success"
          size="medium"
          @click="addOrderDIALOG = true"
        >新建退费</el-button>
        <el-button size="medium">导出</el-button>
      </div>
      <!-- 退费表格区域 -->
      <el-table
        border
        size="mini"
        fit
        highlight-current-row
        :data="tuifeiShuzu1"
      >
        <el-table-column align="center" label="序号" type="index" width="100" />
        <el-table-column align="center" label="退费状态">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_status === 0)" type="info" effect="dark"> 受理中 </el-tag>
            <el-tag v-if="(scope.row.return_status === 1)" type="primary" effect="dark"> 已完成 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退费方式">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_type === 1)"> 现金 </el-tag>
            <el-tag v-if="(scope.row.return_type === 2)" type="primary"> 刷卡 </el-tag>
            <el-tag v-if="(scope.row.return_type === 3)" type="info"> 支付宝 </el-tag>
            <el-tag v-if="(scope.row.return_type === 4)" type="warning"> 微信 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单ID" prop="order_id" />
        <el-table-column
          align="center"
          label="录入信息"
          width="120"
          prop="information"
        />
        <el-table-column align="center" label="备注" width="120" prop="desc" />
        <el-table-column align="center" label="学生id" prop="student_id" />
        <el-table-column
          align="center"
          label="审批人名字"
          width="160"
          prop="teacher_name"
        />
        <el-table-column align="center" label="主根进人id" prop="teacher_id" />
        <el-table-column
          align="center"
          label="机构id"
          width="100"
          prop="institution_id"
        />
        <el-table-column
          align="center"
          label="退费金额"
          width="100"
          prop="back_fees"
        />
        <el-table-column align="center" label="查看" width="300">
          <template>
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              @click="lookTuiFeiDialogVisible = true"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage1"
          :page-sizes="[6, 15, 30]"
          :page-size="getTuifeiQueryInfo1.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total1"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
    </div>

    <!-- 作废列表-->
    <div v-if="showPage === 3">
      <div class="tuifeibiaoqianBtn">
        <el-button
          type="success"
          size="medium"
          @click="addOrderDIALOG = true"
        >新建退费</el-button>
        <el-button size="medium">导出</el-button>
      </div>
      <!-- 退费表格区域 -->
      <el-table
        border
        size="mini"
        fit
        highlight-current-row
        :data="tuifeiShuzu2"
      >
        <el-table-column align="center" label="序号" type="index" width="100" />
        <el-table-column align="center" label="退费状态">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_status === 0)" type="info" effect="dark"> 受理中 </el-tag>
            <el-tag v-if="(scope.row.return_status === 1)" type="primary" effect="dark"> 已完成 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退费方式">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.return_type === 1)"> 现金 </el-tag>
            <el-tag v-if="(scope.row.return_type === 2)" type="primary"> 刷卡 </el-tag>
            <el-tag v-if="(scope.row.return_type === 3)" type="info"> 支付宝 </el-tag>
            <el-tag v-if="(scope.row.return_type === 4)" type="warning"> 微信 </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单ID" prop="order_id" />
        <el-table-column
          align="center"
          label="录入信息"
          width="120"
          prop="information"
        />
        <el-table-column align="center" label="备注" width="120" prop="desc" />
        <el-table-column align="center" label="学生id" prop="student_id" />
        <el-table-column
          align="center"
          label="审批人名字"
          width="160"
          prop="teacher_name"
        />
        <el-table-column align="center" label="主根进人id" prop="teacher_id" />
        <el-table-column
          align="center"
          label="机构id"
          width="100"
          prop="institution_id"
        />
        <el-table-column
          align="center"
          label="退费金额"
          width="100"
          prop="back_fees"
        />
        <el-table-column align="center" label="查看" width="300">
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              @click="lookTuiFeiDialogVisible = true;getTuifeiRow(scope.row.unid)"
            >查看</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage2"
          :page-sizes="[6, 15, 30]"
          :page-size="getTuifeiQueryInfo2.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </div>
    </div>
    <!-- 查看退费信息DIALOG   -->
    <el-dialog
      title="学员订单信息"
      :visible.sync="lookTuiFeiDialogVisible"
      width="60%"
    >
      <div class="xueyuandingdanxinxi">
        <div><h4>学员基本信息</h4></div>
        <div class="xueyuandingdanxinxi1">
          <div class="xueyuanjibenxinxiDIV1">
            <div>姓名：张伟</div>
            <div>性别：男</div>
            <div>就读年级：初三</div>
          </div>
          <div class="xueyuanjibenxinxiDIV2">
            <div>联系方式：1781116478</div>
            <div>所属校区：智助教育南校区</div>
          </div>
        </div>

        <div><h4>课程基本信息</h4></div>
        <div class="xueyuandingdanxinxi1">
          <div class="xueyuanjibenxinxiDIV1">
            <div>课程姓名：高中英语提高</div>
            <div>开课日期：2020-12-31</div>
            <div>上课时间：每周五19:30</div>
          </div>
          <div class="xueyuanjibenxinxiDIV2">
            <div>任课老师：张薇薇</div>
            <div>联系方式：1781116478</div>
            <div>所属校区：智助教育南校区</div>
          </div>
        </div>
        <div class="jindutushi">进度图示</div>
        <div class="xueyuandingdanxinxiDiv3">
          <div />
          <div />
          <div />
          <div />
          <div />
          <div />
        </div>
        <div><h4>学员缴费记录</h4></div>
        <div class="xueyuandingdanxinxi1">
          <div class="xueyuanjibenxinxiDIV1">
            <div>订单编号：ZAASDASD123</div>
            <div>收款日期：2020-12-31</div>
            <div>上课时间：每周五19:30</div>
          </div>
          <div class="xueyuanjibenxinxiDIV2">
            <div>缴费类型：定金</div>
            <div>收款人：曾晓蓉</div>
            <div>交易编号：ASAD123156</div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="lookTuiFeiDialogVisible = false">打印</el-button>
        <el-button
          type="primary"
          @click="chakantuikuanjinduDialog = true"
        >查看退款进度</el-button>
      </span>
    </el-dialog>
    <!-- 查看退费进度DIALOG   -->
    <el-dialog
      title="退款进度"
      :visible.sync="chakantuikuanjinduDialog"
      width="60%"
    >
      <div>
        <el-steps :active="2">
          <el-step title="提交申请" />
          <el-step title="教学部门确认" />
          <el-step title="财务审核" />
          <el-step title="招生部门确认" />
          <el-step title="退款" />
        </el-steps>
        <div class="tuifeijinduForm">
          <el-form
            label-position="right"
            label-width="100px"
            :model="tuifeijinduForm"
          >
            <el-form-item label="订单编号">
              <div>{{ tuifeijinduForm.dingdanbianhao }}</div>
            </el-form-item>
            <el-form-item label="退费金额">
              <div>{{ tuifeijinduForm.num }}</div>
            </el-form-item>
            <el-form-item label="退费方式">
              <div>
                {{ tuifeijinduForm.type }}
              </div>
            </el-form-item>
            <el-form-item label="备注">
              <div>{{ tuifeijinduForm.beizhu }}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="chakantuikuanjinduDialog = false"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!-- 新建退费DIALOG -->
    <el-dialog title="退费订单" :visible.sync="addOrderDIALOG" width="40%">
      <el-form
        ref="moneyOutFormRef"
        :model="addMonOutForm"
        :rules="addMonOutFormRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="xjtfallDIV">
          <div>
            <el-form-item label="订单编号" prop="order_id">
              <div class="dingdanxinxiDIV">
                <el-select
                  v-model="addMonOutForm.order_id"
                  placeholder="订单编号"
                >
                  <el-option
                    v-for="(item, index) in orderList"
                    :key="index"
                    :label="item.order_num"
                    :value="item.unid"
                  />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="学生ID" prop="student_id">
              <div class="dingdanxinxiDIV" style="width: 200px">
                <el-input v-model="addMonOutForm.student_id" disabled />
              </div>
            </el-form-item>
            <el-form-item label="退费金额" prop="back_fees">
              <div class="dingdanxinxiDIV" style="width: 200px">
                <el-input v-model="addMonOutForm.back_fees" disabled />
              </div>
            </el-form-item>

            <el-form-item label="录入信息" prop="information">
              <div style="width: 200px">
                <el-input v-model="addMonOutForm.information" />
              </div>
            </el-form-item>
          </div>
          <div class="xjtfDIV2">
            <el-form-item label="备注" prop="desc">
              <div style="width: 200px">
                <el-input v-model="addMonOutForm.desc" />
              </div>
            </el-form-item>

            <el-form-item label="申请人" prop="teacher_name">
              <div style="width: 200px">
                <el-input v-model="addMonOutForm.teacher_name" />
              </div>
            </el-form-item>
            <el-form-item label="申请人ID" prop="teacher_id">
              <div style="width: 200px">
                <el-input v-model="addMonOutForm.teacher_id" />
              </div>
            </el-form-item>

            <el-form-item label="退费方式" prop="return_type">
              <div style="width: 200px">
                <el-select v-model="addMonOutForm.return_type">
                  <el-option label="现金" value="1" />
                  <el-option label="刷卡" value="2" />
                  <el-option label="支付宝" value="3" />
                  <el-option label="微信" value="4" />
                </el-select>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="部门ID" prop="role">
          <template>
            <el-checkbox-group v-model="addMonOutForm.role">
              <el-checkbox
                v-for="(city, index) in bumenShuzu"
                :key="index"
                :label="city.id"
              >{{ city.role_name }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrderDIALOG = false">关闭</el-button>
        <el-button type="primary" @click="addTuiFei()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
    getOrder,
    addTuiFeiApi,
    getBumenApi,
    getOrderInfoAPI,
    getTuifeiAPI,
    deleteTuifeiAPI,
    getTuifeiRowApi
} from '@/api/order'
export default {
    data() {
        return {
            isStuShow: 1,
            showPage: 1,
            tuifeiShuzu: [],
            tuifeiShuzu1: [],
            tuifeiShuzu2: [],
            getTuifeiQueryInfo: {
                limit: 6,
                page: 1,
                order_id: ''
            },
            getTuifeiQueryInfo1: {
                return_status: 0,
                limit: 6,
                page: 1,
                order_id: '',
                is_delete: 0
            },
            getTuifeiQueryInfo2: {
                limit: 6,
                page: 1,
                order_id: '',
                is_delete: 1
            },
            bumenShuzu: {},
            orderList: [],
            addMonOutForm: {
                order_id: '',
                return_type: null,
                information: '退费',
                desc: '智联教育',
                student_id: '',
                teacher_name: '陈晓芳',
                teacher_id: '201401',
                back_fees: '',
                role: []
            },
            addOrderDIALOG: false,
            tuifeijinduForm: {
                dingdanbianhao: 'AZASDA456',
                num: 893,
                type: '电子钱包',
                beizhu: '因转校无法完成接下来的课程'
            },
            chakantuikuanjinduDialog: false,
            lookTuiFeiDialogVisible: false,
            currentPage: 1, // 页数
            currentPage1: 1, // 页数
            currentPage2: 1, // 页数
            total: null, // 总数
            total1: null, // 总数
            total2: null, // 总数
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            addMonOutFormRules: {
                order_id: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                student_id: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                back_fees: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                information: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                teacher_name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                teacher_id: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                return_type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                role: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()])
                        }
                    },
                    {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date(new Date().getFullYear(), 0)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setMonth(start.getMonth() - 6)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            },
            value1: '',
            value2: ''
        }
    },
    watch: {
        'addMonOutForm.order_id': {
            handler: async function() {
                let query = {
                    unid: ''
                }

                query.unid = this.addMonOutForm.order_id
                var resData = await getOrderInfoAPI(query)
                if (resData.code !== 200) return
                else {
                    this.addMonOutForm.student_id = resData.data.student_id
                    this.addMonOutForm.back_fees = resData.data.total_price
                }
            },
            deep: true
        }
    },
    created() {
        this.getOrder()
        this.getBumen()
        this.getTuifei()
        this.getTuifei1()
        this.getTuifei2()
        this.getTuifei2()
    },
    methods: {
        // 获取当前行退费信息
        async getTuifeiRow(unid) {
            let qqq = {
                unid: ''
            }
            qqq.unid = unid
            let rs = await getTuifeiRowApi(qqq)
            console.log(rs)
        },
        // 分页查询
        handleSizeChange(val) {
            this.getTuifeiQueryInfo.limit = val
            this.getTuifei()
        },
        handleCurrentChange(val) {
            this.getTuifeiQueryInfo.page = val
            this.getTuifei()
        },

        // 分页查询受理中
        handleSizeChange1(val) {
            this.getTuifeiQueryInfo1.limit = val
            this.getTuifei1()
        },
        handleCurrentChange1(val) {
            this.getTuifeiQueryInfo1.page = val
            this.getTuifei1()
        },
        // 分页查询作废退费列表
        handleSizeChange2(val) {
            this.getTuifeiQueryInfo1.limit = val
            this.getTuifei2()
        },
        handleCurrentChange2(val) {
            this.getTuifeiQueryInfo2.page = val
            this.getTuifei2()
        },
        async deleteTuifei(unid) {
            this.$confirm('此操作将删除该课程，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                let qqq = {
                    unid: ''
                }
                qqq.unid = unid
                console.log(qqq)
                var rs = await deleteTuifeiAPI(qqq)
                console.log(rs)
                if (rs.code !== 200) return
                else {
                    this.$message.success('删除退费订单成功')
                    if (this.showPage === 1) this.getTuifei()

                    if (this.showPage === 2) this.getTuifei1()
                    else this.getTuifei2()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 分页查询全部退费
        async getTuifei() {
            var rs = await getTuifeiAPI(this.getTuifeiQueryInfo)
            console.log('全部退费分页查询')
            console.log(rs.data)
            this.tuifeiShuzu = rs.data.list
            this.total = rs.data.total
            this.currentPage = rs.data.current_page
        },
        // 分页查询未作废退费
        async getTuifei1() {
            var rs = await getTuifeiAPI(this.getTuifeiQueryInfo1)
            console.log('未作废退费分页查询')
            console.log(rs.data)
            this.tuifeiShuzu1 = rs.data.list
            this.total1 = rs.data.total
            this.currentPage1 = rs.data.current_page
        },
        // 分页查询作废列表
        async getTuifei2() {
            var rs = await getTuifeiAPI(this.getTuifeiQueryInfo2)
            console.log('作废退费分页查询')
            console.log(rs.data)
            this.tuifeiShuzu2 = rs.data.list
            this.total2 = rs.data.total
            this.currentPage2 = rs.data.current_page
        },
        // 获取部门ID
        async getBumen() {
            let aaa = {}
            var rs = await getBumenApi(aaa)
            console.log('部门')
            console.log(rs.data)
            this.bumenShuzu = rs.data
        },
        changIDAndMoney(id) {
            console.log(id)
        },
        addTuiFei() {
            this.$refs.moneyOutFormRef.validate(async valid => {
                if (!valid) return
                else {
                    var resData = await addTuiFeiApi(this.addMonOutForm)
                    if (resData.code !== 200) return
                    else {
                        this.$message.success('新建退费成功')
                        this.addOrderDIALOG = false
                        this.getTuifei()
                    }
                }
            })
        },
        async getOrder() {
            let query = {}
            var resData = await getOrder(query)
            if (resData.code !== 200) return
            else {
                console.log('订单信息')
                console.log(resData.data.list)
                this.orderList = resData.data.list
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.xjtfallDIV {
  display: flex;
  .xjtfDIV2 {
    margin-left: 30px;
  }
}
.icon {
  font-size: 60px;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-table--mini {
  font-size: 14px;
}

.moneyShow {
  display: flex;

  .moneyShowDIa {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    height: 100.44px;
    width: 217px;
  }
  .moneyShowDIb {
    border-radius: 8px;
    margin-left: 30px;
    border: 1px solid #dcdfe6;
  }

  .moneyShowDIv1 {
    border-radius: 8px;
    margin-left: 30px;
    padding-right: 30px;
    border: 1px solid #dcdfe6;
  }
  .moneyShowDIv1INY {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 30px 15px 25px;
    .dingdanzongeasda {
      margin-left: 16px;
    }
    .dingdanzongeasdaa {
      margin: 6px 0 0 6px;
      font-size: 18px;
    }
  }
}
.tuifeiliebiaobiaoqian {
  display: flex;
  div {
    margin: 20px 20px 20px 20px;
  }
}
.tuifeibiaoqianBtn {
  margin-bottom: 15px;
  margin-top: 15px;
}
.bottomPaginationaa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.xueyuandingdanxinxi {
  margin-left: 10px;
  .jindutushi {
    margin-left: 10px;
  }
  .xueyuandingdanxinxiDiv3 {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 0 50px;
    div {
      border: 1px solid rgb(97, 87, 87);
      border-radius: 12px;

      width: 100px;
      height: 100px;
    }
  }
  .xueyuandingdanxinxi1 {
    display: flex;
    margin-bottom: 30px;
    .xueyuanjibenxinxiDIV1 {
      margin-left: 10px;
      div {
        margin-top: 12px;
      }
    }
    .xueyuanjibenxinxiDIV2 {
      margin-left: 150px;
      div {
        margin-top: 12px;
      }
    }
  }
}
.tuifeijinduForm {
  width: 500px;
  margin: 50px 0 0 150px;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 50px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.xuanzexianshi {
  margin: 20px 0x 0 30px;
  display: flex;
  div {
    margin-left: 30px;
  }
}
</style>
